import 'package:flutter/material.dart';

import './my_index_page.dart';

class CustomAnimationBar extends StatelessWidget {
  final int selectedIndex;

  final double iconSize;

  final Color? backgroundColor;

  final bool showElevation;

  final Duration animationDuration;

  final List<MyBottomNavigationBarItem> items;

  final ValueChanged<int> onItemSelected;

  final MainAxisAlignment mainAxisAlignment;

  final double itemCornerRadius;

  final double containerHeight;

  final Curve curve;

  const CustomAnimationBar(
      {Key? key,
      this.selectedIndex = 0,
      this.iconSize = 24,
      this.backgroundColor,
      this.showElevation = true,
      this.animationDuration = const Duration(milliseconds: 200),
      required this.items,
      required this.onItemSelected,
      this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
      this.itemCornerRadius = 24,
      this.containerHeight = 48,
      this.curve = Curves.easeInOut})
      : assert(items.length >= 2 && items.length <= 5),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final bgColor = backgroundColor ?? Theme.of(context).bottomAppBarColor;
    return SafeArea(
        child: Container(
      width: double.infinity,
      height: containerHeight,
      child: Row(
        mainAxisAlignment: mainAxisAlignment,
        children: items.map((item) {
          var index = items.indexOf(item);
          return GestureDetector(
            onTap: () => {onItemSelected(index)},
            child: _ItemWidget(
              item: item,
              iconSize: iconSize,
              isSelected: index == selectedIndex,
              backgroundColor: bgColor,
              itemCornerRadius: itemCornerRadius,
              animationDuration: animationDuration,
              curve: curve,
            ),
          );
        }).toList(),
      ),
    ));
  }
}

class _ItemWidget extends StatelessWidget {
  final double iconSize;
  final bool isSelected;
  final MyBottomNavigationBarItem item;
  final Color backgroundColor;
  final double itemCornerRadius;
  final Duration animationDuration;
  final Curve curve;

  const _ItemWidget({
    Key? key,
    required this.item,
    required this.iconSize,
    required this.isSelected,
    required this.backgroundColor,
    required this.animationDuration,
    required this.itemCornerRadius,
    this.curve = Curves.easeInOut,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Semantics(
        container: true,
        selected: isSelected,
        child: AnimatedContainer(
            width: isSelected ? 100 : 50,
            height: double.maxFinite,
            duration: animationDuration,
            curve: curve,
            decoration: BoxDecoration(
                color: isSelected
                    ? item.activeColor.withOpacity(0.2)
                    : backgroundColor,
                borderRadius: BorderRadius.circular(itemCornerRadius)),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              physics: NeverScrollableScrollPhysics(),
              child: Container(
                width: isSelected ? 100 : 50,
                padding: EdgeInsets.symmetric(horizontal: 8),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconTheme(
                        data: IconThemeData(
                            size: iconSize,
                            color: isSelected
                                ? item.activeColor.withOpacity(1)
                                : (item.inactiveColor ?? item.activeColor)),
                        child: item.icon)
                  ],
                ),
              ),
            )),
      ),
    );
  }
}

class MyBottomNavigationBarItem {
  final Widget icon;
  final Widget title;
  final Color activeColor;
  final Color? inactiveColor;
  final TextAlign? textAlign;

  MyBottomNavigationBarItem({
    required this.icon,
    required this.title,
    this.activeColor = Colors.blue,
    this.textAlign,
    this.inactiveColor,
  });
}
